<template>
	<view class="y-flex y-align-center y-justify-center"
	:style="{
		width: _pixelunit(size),
		height: _pixelunit(size),
		'border-radius': _pixelunit(radius),
		'background-color': bgColor
	}">
		<image lazy-load v-if="isImage" :src="src" :mode="mode" :style="{
			'width': _pixelunit(size),
			'height': _pixelunit(size),
			'border-radius': _pixelunit(radius)
		}"></image>
		<com-icon v-else-if="src" :name="src" :size="size" :color="color"></com-icon>
		<text v-else :style="{color: color, 'font-size': _unitpixel(size)}">{{name.charAt(0)}}</text>
	</view>
</template>

<script>
	import { pixelunit, unitpixel } from '@/assets/js/util.js'
	export default {
		props: {
			src: {
				type: String,
				default: ''
			},
			name: {
				type: String,
				default: ''
			},
			size: {
				type: [Number, String],
				default: 27
			},
			color: {
				type: String,
				default: '#333333'
			},
			bgColor: {
				type: String,
				default: ''
			},
			radius: {
				type: [String, Number],
				default: ''
			},
			mode: {
				type: String,
				default: 'aspectFit'
			}
		},
		computed: {
			isImage () {
				return this.src.indexOf('http://') > -1 || this.src.indexOf('https://') > -1
			}
		},
		methods: {
			_pixelunit (size) {
				return pixelunit(size)
			},
			_unitpixel (size) {
				return unitpixel(size)
			}
		}
	}
</script>

<style>
</style>